
/*
 * @Author: crixusshen
 * @Date: 2021-06-02 10:09:48
 * @LastEditTime: 2021-06-03 09:08:44
 * @LastEditors: Please set LastEditors
 * @Description: ScrollView
 * @FilePath: /taro-scrollview-bug/src/pages/index/index.tsx
 */
import Taro from "@tarojs/taro";
import { Component } from 'react';
import { View  } from '@tarojs/components';
import { FScrollView as ScrollView } from './scrollViewCompatible';

import './index.scss'

export default class PageView extends Component {
  onScrollToLower = (e) => {
    console.log('[onScrollToLower]', e.detail)
  }

  onScroll = (e) => {
    // ios9.3.2上 e 返回undefined
    console.log('[onScroll]', e.detail)
  }

  render() {
    const { windowHeight } = Taro.getSystemInfoSync();
    const scrollStyle = {
      height: '150px'
    }
    const scrollTop = 0
    const Threshold = 20
    const vStyleA = {
      height: '150px',
      'background-color': 'rgb(26, 173, 25)'
    }
    const vStyleB = {
       height: '150px',
      'background-color': 'rgb(39,130,215)'
    }
    const vStyleC = {
      height: '150px',
      'background-color': 'rgb(241,241,241)',
      color: '#333'
    }
    return (
      <View className="financeCurrent-page">
      <View className="ui-wrapper">
      <ScrollView
        className='scrollview'
        scrollY
        scrollWithAnimation
        scrollTop={scrollTop}
        style={scrollStyle}
        lowerThreshold={Threshold}
        upperThreshold={Threshold}
        onScrollToLower={this.onScrollToLower}
        onScroll={this.onScroll}
      >
        <View style={vStyleA}>A</View>
        <View style={vStyleB}>B</View>
        <View style={vStyleC}>C</View>
        <View style={vStyleA}>A</View>
        <View style={vStyleB}>B</View>
        <View style={vStyleC}>C</View>
        <View style={vStyleA}>A</View>
        <View style={vStyleB}>B</View>
        <View style={vStyleC}>C</View>
      </ScrollView>
      </View>
      </View>

    )
  }
}
